<script setup>
    import { onMounted } from 'vue'
    import { getVideoList } from '@/common/apis'
    import PlayVideo from './PlayVideo.vue'

    let resData = $ref([
        { biaoti: '中专、大专、本科等学生就业指南', fileDate: '2022-07-10' },
        { biaoti: '高等学子疫情期间职业教育宣导', fileDate: '2022-07-07' },
        { biaoti: '企业工作人员劳动保障宣传', fileDate: '2022-07-01' },
        { biaoti: '高等学子利用本专业为家乡谋发展', fileDate: '2022-06-30' },
        { biaoti: '大力发展互联网，促进本市经济', fileDate: '2022-06-28' },
        { biaoti: '社保政策不错，如何有效落实？', fileDate: '2022-06-28' },
    ])

</script>

<template>
    <div class="card-box dark promotion-video-wrap mt10">
        <card-title title="信息发布"></card-title>

        <el-scrollbar class="list-wrap">
            <ul 
                class="item flex" 
                v-for="(item, index) in resData" :key="index"
            >
                <li class="index">{{ index+1 }}</li>
                <li class="title">{{ item.biaoti }}</li>
                <li class="date">{{ item.fileDate }}</li>
            </ul>
        </el-scrollbar>

    </div>

    <play-video ref="playVideo"></play-video>

</template>

<style lang="scss" scoped>
    @import "../../assets/css/common.scss";

    .promotion-video-wrap{
        height: 306px;
        
        .list-wrap{
            height: 250px;
            padding: 20px 15px;

            .item{
                color: #fff;
                padding: 10px 0;
                cursor: pointer;

                li{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-right: 10px;
                }

                .index{
                    width: 30px;
                }

                .title{
                    flex: 1;
                }

                .date{
                    width: 100px;
                    text-align: right;
                }
            }
        }
    }

</style>